<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
      <div class="toplineBox mb-10">
        <div class="toplineBox-left">
          <el-select placeholder="学年" v-model="formData.semester_id" size="small"
                     class="w-180 mr-10">
            <el-option :label="item.year" :value="item.id" v-for="(item, index) in yearList"
                       :key="index"></el-option>
          </el-select>
          <el-select placeholder="周" v-model="formData.week" size="small"
                     class="w-140 mr-10">
            <el-option :label="item.name" :value="item.id" v-for="(item, index) in weekList"
                       :key="index"></el-option>
          </el-select>
          <el-button type="primary" size="small" @click="searchFn(1)"><i class="el-icon-search"></i>查询</el-button>
          <el-button size="small" @click="searchFn(2)"><i class="el-icon-refresh"></i>重置</el-button>
          <el-button type="primary" size="small" @click="addVisible=true" plain>新增值班记录</el-button>
          <el-button size="small" @click="userVisible=true" plain>设置值班人员</el-button>
          <el-button size="small" @click="listVisible=true" plain>编辑值班内容</el-button>
          <downexcel type="dutyWeek" :option="formData"></downexcel>
        </div>
      </div>
      <div class="table-title">
        <span>{{ scoolTime ? scoolTime.year : '--' }}学年</span>/
        <span>{{ scoolTime && scoolTime.type == 1 ? '下' : '上' }}学期</span>/
        <span>第{{ weekNum }}周</span>
      </div>
      <div class="table-box-body">
        <table width="100%" border="1">
          <tr>
            <td colspan="3" class="td-240">星期</td>
            <td v-for="item in weeklength">{{weekName[item]}}</td>
          </tr>
          <tr>
            <td colspan="3" class="td-240">日期</td>
            <td v-for="item in weeklength">
              {{weekOption[item].date}}
            </td>
          </tr>
          <tr>
            <td colspan="3" class="td-240">值班人员</td>
            <td v-for="item in weeklength">
              {{JSON.stringify(weekOption[item].list)!=='[]'?weekOption[item].list.user.realname: ''}}
            </td>
          </tr>
          <template v-for="(item_list, index_) in dutyListOption">
            <tr v-for="(list_tr, index_tr) in item_list.list" :key="list_tr.id">
              <td :rowspan="dutyCount" v-if="!index_&& !index_tr" class="td-80">情况记录</td>
              <td :rowspan="item_list.list.length" class="td-80" v-if="!index_tr">{{ item_list.name }}</td>
              <td  class="td-80">{{ list_tr.name }}</td>
              <td class="td-80" v-for="item in weeklength">
                {{JSON.stringify(weekOption[item].list)!=='[]'?(weekOption[item].list.list[list_tr.id]?weekOption[item].list.list[list_tr.id].score:''): ''}}
              </td>
            </tr>
          </template>
          <tr>
            <td colspan="2" class="td-160">亮点或存在问题</td>
            <td v-for="item in weeklength">
              {{JSON.stringify(weekOption[item].list)!=='[]'?weekOption[item].list.problem: ''}}
            </td>
          </tr>
          <tr>
            <td colspan="2" class="td-160">群众反馈</td>
            <td v-for="item in weeklength">
              {{JSON.stringify(weekOption[item].list)!=='[]'?weekOption[item].list.reflect: ''}}
            </td>
          </tr>
          <tr>
            <td>操作</td>
            <td colspan="2" class="td-160"></td>
            <td v-for="item in weeklength">
              <i class="detelSign" v-if="JSON.stringify(weekOption[item].list)!=='[]'" @click="detelSignFn(item)">删除记录</i>
            </td>
          </tr>
        </table>
      </div>
    </div>
    <settingUser :visible.sync="userVisible"></settingUser>
    <optionList :visible.sync="listVisible" @InitFn="dutyList"></optionList>
    <addDuty :visible.sync="addVisible" @InitFn="InitFn"></addDuty>
  </div>
</template>

<script>
import settingUser from "./settingUser";
import optionList from "./optionList";
import addDuty from "./addDuty";
import {weekList} from '@/utils/util.js'
import {mapActions} from "vuex";
import {dutyOptionIndex, dutySignIndex, dutySignDelete} from "@/api/admin/duty"


export default {
  components: {
    settingUser,
    optionList,
    addDuty
  },
  data() {
    return {
      userVisible: false,
      listVisible: false,
      addVisible: false,
      formData: {
        p: 0,// 	整型 	必填 	1 	- 	页码0全部
        week: '',// 	整型 	必填 	1 	- 	周
        semester_id: '',// 	整型 	必填 	1 	- 	学期
      },
      weekList: weekList,
      scoolTime: null,
      weekNum: 0,
      yearList: [],
      weekName: {
        1: '一',
        2: '二',
        3: '三',
        4: '四',
        5: '五',
        6: '六',
        7: '日',
      },
      defultValue: null,

      dutyListOption: [], // 值班内容
      dutyCount: 0,
      weekOption: null, // 首页数据
      weeklength: 0
    }
  },
  created() {
    this.dayListFn()
    this.dutyList()
  },
  methods: {
    ...mapActions(['getSemester']),
    InitFn(){
      dutySignIndex(this.formData).then(res=>{
        console.log('res主页记录:', res)
        let list_ = {}
        for(let item of res.list){
          if(JSON.stringify(item.list)!=='[]'){
            let a_ = JSON.parse(item.list.list)
            let b_ ={}
            for(let score_ of a_){
              b_[score_.id] = score_
            }
            item.list.list = b_
          }
          list_[item.week] = item
        }
        this.weeklength = res.list.length
        console.log('weekOption===>', list_)
        this.weekOption = JSON.parse(JSON.stringify(list_))
      })
    },
    dutyList() {
      this.dutyListOption = []
      this.dutyCount = 0
      dutyOptionIndex({p: 0}).then(res => {
        let a_ = {}
        for (let item of res.list) {
          if (!item.parent_id) {
            if (a_[item.id]) {
              a_[item.id].name = item.name
              a_[item.id].id = item.id
            } else {
              a_[item.id] = {
                name: item.name,
                id: item.id,
                list: []
              }
            }
          } else {
            if (a_[item.parent_id]) {
              a_[item.parent_id].list.push(item)
            } else {
              a_[item.parent_id] = {
                name: '',
                id: '',
                list: [item]
              }
            }
          }
        }
        let dutyCount = 2
        for (let index in a_) {
          dutyCount = dutyCount + a_[index].list.length
          this.dutyListOption.push(a_[index])
        }
        console.log('dutyListOption', this.dutyListOption)
        this.dutyCount = dutyCount

      })
    },
    dayListFn() {
      this.getSemester().then(res => {
        if (!res.code) {
          this.scoolTime = res.vo;
          this.weekNum = res.week;
          this.defultValue = res
          this.formData.semester_id = res.vo.id
          this.formData.week = res.week
        }
        this.InitFn()
      });
      this.$fetch(this.api.setting.semesterIndex, {}).then((response) => {
        for (let i in response.list) {
          if (response.list[i].type === 1) {
            response.list[i].year = response.list[i].year + ' 下学期'
          } else {
            response.list[i].year = response.list[i].year + ' 上学期'
          }
        }
        this.yearList = response.list

      }).catch((err) => {
        console.log(err)
      })
    },
    searchFn(option) {
      if (option === 1) {
        console.log('内容：', this.formData)
        for (let item of this.yearList) {
          if (Number(this.formData.semester_id) === Number(item.id)) {
            this.scoolTime = JSON.parse(JSON.stringify({
              year: item.year.split(' ')[0],
              type: item.type
            }))
          }
        }
        this.weekNum = this.formData.week
        this.InitFn()
      } else {
        this.scoolTime = this.defultValue.vo;
        this.formData.semester_id = this.defultValue.vo.id
        this.formData.week = this.defultValue.week
        this.InitFn()
      }
    },
    detelSignFn(item){
      let that = this
      this.$confirm(`确认删除【${that.weekOption[item].date}】值班记录, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return dutySignDelete({id:that.weekOption[item].list.id})
      }).then(()=>{
        that.dayListFn()
        that.dutyList()
      }).catch(() => {
      })
    }
  },
  mounted() {
  }
}
</script>
<style scoped>
table {
  border-collapse: collapse;
}

table th {
  height: 50px;
}

table td {
  padding: 5px;
  text-align: center;
  font-size: 12px;
}

table td em {
  font-style: normal;
  font-size: 16px;
}

table td i {
  font-style: normal;
  font-size: 12px;
}

.table-title {
  margin-bottom: 10px;
}

.table-title span {
  font-weight: bold;
}
.td-80{
  width: 80px
}

.td-300 {
  width: 300px
}
.tips-day-list {
  padding: 10px 0 20px;
  text-align: center;
}
.td-160{
  width: 160px;
}
.td-240{
  width: 240px;
}
.detelSign {
  color: red;
  cursor: pointer;
}
.detelSign:hover {
  text-decoration: underline;
}
</style>
